<template>
  <a-drawer
    title="处理维保任务"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="workOrderEditVisible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='任务类型' v-bind="formItemLayout">
        <a-select
          :disabled="false"
          style="width: 100%"
          v-decorator="['type']">
          <a-select-option v-for="t in types" :key="t.id">{{t.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='任务描述' v-bind="formItemLayout">
        <a-input style="width: 100%" :disabled="false" readOnly v-decorator="['name']"/>
      </a-form-item>
      <a-form-item label='所属项目' v-bind="formItemLayout">
        <a-input readOnly v-decorator="['project']"/>
      </a-form-item>
      <a-form-item label='任务状态' v-bind="formItemLayout">
        <span>{{statusNames[workOrder.status]}}</span>
      </a-form-item>
      <a-form-item v-if="workOrder.status===0" label='派单方式' v-bind="formItemLayout">
        <a-radio-group
          v-model="workOrder.distributeType"
          v-decorator="[
            'distributeType',
            {rules: [{ required: true, message: '请选择派单方式' }]}
          ]">
          <a-radio value="0">指派</a-radio>
          <a-radio value="1">众包</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="workOrder.status===0"  label='处理人' v-bind="formItemLayout">
        <a-select
          :disabled="showDistributeType"
          v-model="workOrder.handleUser"
          style="width: 100%"
          v-decorator="['handleUser', {rules: [{ required: true, message: '请选择处理人' }]}]">
          <a-select-option v-for="u in users" :key="u.userId">{{u.username}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="workOrder.status===0"  label='审核人' v-bind="formItemLayout">
        <a-select
          v-model="workOrder.acceptUser"
          style="width: 100%"
          v-decorator="['acceptUser']">
          <a-select-option v-for="u in acceptUsers" :key="u.userId">{{u.username}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="workOrder.status===3" label='处理方式' v-bind="formItemLayout">
        <a-textarea
          v-model="workOrder.treatment"
          :rows="4"
          v-decorator="[
          'treatment',
          {rules: [
            { required: true, max: 50, message: '长度不能超过50个字符'}
          ]}]">
        </a-textarea>
      </a-form-item>
      <a-form-item v-if="workOrder.status===4" label='审核结果' v-bind="formItemLayout">
        <a-radio-group
          v-model="workOrder.accept"
          v-decorator="[
            'accept',
            {rules: [{ required: true, message: '请选择状态' }]}
          ]">
          <a-radio value="1">审核通过</a-radio>
          <a-radio value="0">审核不通过</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label='备注' v-bind="formItemLayout">
      <a-textarea
        :rows="4"
        v-model="workOrder.remark"
        v-decorator="[
          'remark',
          {rules: [
            { max: 50, message: '长度不能超过50个字符'}
          ]}]">
      </a-textarea>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-collapse defaultActiveKey="1" :bordered="false">
          <a-collapse-panel header="处理记录" key="1" style="border:0;">
            <a-list itemLayout="horizontal" :dataSource="handleHistory">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta :description="item.remark">
                  <span slot="title">{{item.completeTime}} {{item.userName}} {{item.taskName}}</span>
                  <a-avatar slot="avatar" :src="'static/avatar/' + item.userAvatar" />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-collapse-panel>
        </a-collapse>

      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="onClose" style="margin-right: .8rem" :disabled="false">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
}
const tailFormItemLayout = {
  wrapperCol: {
    span: 22,
    offset: 3
  }
}
export default {
  name: 'WorkOrderEdit',
  props: {
    workOrderEditVisible: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      formItemLayout,
      tailFormItemLayout,
      form: this.$form.createForm(this),
      workOrder: {acceptUser: '-1', distributeType: '-1'},
      users: [],
      acceptUsers: [],
      statusNames: ['派单', '抢单', '待处理', '处理中', '待审核', '完成'],
      types: [
        {id: 0, name: '火警'},
        {id: 1, name: '故障'},
        {id: 2, name: '报修'},
        {id: 3, name: '巡查'},
        {id: 4, name: '保养'}],
      handleHistory: [
        {title: 'Ant Design Title 1', desc: 'lowekjlksdjfsdufiofksdjfsjdf;;oiwekdkjd'},
        {title: 'Ant Design Title 2', desc: 'lowekjlksdjfsdufiofksdjfsjdf;;oiwekdkjd'},
        {title: 'Ant Design Title 3', desc: 'lowekjlksdjfsdufiofksdjfsjdf;;oiwekdkjd'},
        {title: 'Ant Design Title 4', desc: 'lowekjlksdjfsdufiofksdjfsjdf;;oiwekdkjd'}],
      showDistributeType: false
    }
  },
  methods: {
    setFormValues ({...workOrder}) {
      this.workOrder.id = workOrder.id
      this.workOrder.name = workOrder.name
      this.workOrder.project = workOrder.project
      this.workOrder.status = workOrder.status
      let fields = ['type', 'name', 'project']
      Object.keys(workOrder).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          let obj = {}
          obj[key] = workOrder[key]
          this.form.setFieldsValue(obj)
        }
      })
    },
    reset () {
      this.loading = false
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      let fields = []
      switch (this.workOrder.status) {
        case 0:
          if (this.distributeType === '1') {
            fields = ['distributeType', 'acceptUser']
          } else {
            fields = ['distributeType', 'acceptUser', 'handleUser']
          }
          break
        case 1:
          break
        case 2:
          fields = ['treatment']
          break
        case 3:
          fields = ['accept']
          break
      }
      this.form.validateFields(fields, (err, values) => {
        if (!err) {
          this.loading = true
          this.$post('workorder/handle', {
            ...this.workOrder
          }).then(() => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  },
  watch: {
    workOrderEditVisible () {
      if (this.workOrderEditVisible) {
        this.$get('user').then((r) => {
          this.users = r.data.rows
          this.acceptUsers = [{userId: '-1', username: '--不审核--'}]
          this.acceptUsers = this.acceptUsers.concat(r.data.rows)
        })
        this.$get('workorder/processHistory', {
          workOrderId: this.workOrder.id}).then((r) => {
          this.handleHistory = r.data
        })
      }
    },
    workOrder: {
      'workOrder.distributeType': function () {
        this.showDistributeType = (this.workOrder.distributeType === '-1')
      }
    }
  }
}
</script>
